<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>车管家已确认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;}
        .products-list ul li{color: #999999;padding: 0 15px;font-size: 14px;}
        .products-list ul li input{border: none; height: 35px;width: 210px;}
        .products-list ul li span{color: #2dc22d}
        .ztg ul li a{color: #999999}
        .ztg ul li a.this-ok span{color: #2dc22d}
        .am-header h1{text-align: center;}
        .navList{display: table;width:100%;height: 50px;margin-bottom:10px;padding:10px 0;background-color:#FFFFFF;border-top:1px solid #d2d2d2;border-bottom: 1px solid #d2d2d2}
        .am-divider-default{margin: 0 10px;}

        #star{display:block;width:100%;text-align:center;margin:0 auto;}
        #star ul{margin:30px 10px 20px;}
        #star li{display:block;float:left;width:24px;margin-right:10px;cursor:pointer;text-indent:-9999px;background:url('../assets/i/icon/star-2.png') no-repeat;}
        #star strong{color:#f60;padding-left:10px;}
        #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url('../assets/i/icon/star-2.png') no-repeat;padding:7px 10px 0;}
        #star p em{color:#f60;display:block;font-style:normal;}
        @font-face{
            font-family: 'icomoon';
            src:url('../assets/fonts/icomoon.eot');                                       /* IE9*/
            src:url('../assets/fonts/icomoon.eot?#iefix') format('embedded-opentype'),    /* IE6-IE8 */
            url('../assets/fonts/icomoon.woff') format('woff'),      /* chrome、firefox */
            url('../assets/fonts/icomoon.ttf') format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../assets/fonts/icomoon.svg#iconfont') format('svg');  /* iOS 4.1- */
            font-weight: normal;
            font-style: normal;
        }
        .ui-fonts{
            font-family: 'icomoon';
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            font-size: 35px;
            color: #999999;
            margin-right: 5px;
        }

        .icon-un{
            color: #EEA415;
        }
    </style>
</head>
<body>
<div class="am-header">
    <h1 class="am-text-lg">车管家已确认</h1>
</div>

<div class="navList">
    <section><h3 style="font-size:16px;margin-bottom: 10px;padding: 0 10px;">车管家信息</h3></section>
    <aside class="am-u-sm-3 am-list-thumb no-right-p">
        <img src="../assets/i/examples/123.png" alt="" />
    </aside>
    <section class="am-u-sm-9 am-list-main">
        <p class="am-text-sm">姓名：田龙</p>
        <p class="am-text-sm">驾龄：7年</p>
        <p class="am-text-sm">电话：15600153257</p>
    </section>
</div>

<div class="navList">
    <section><h3 style="font-size:16px;margin-bottom: 10px;padding: 0 10px;font-size: 14px;">请对我本次服务做出评价</h3></section>
    <hr class="am-divider am-divider-default">
    <div id="star">
        <ul id="list">
            <i class="ui-fonts icon-un">&#xe602</i>
            <i class="ui-fonts icon-un">&#xe602</i>
            <i class="ui-fonts icon-un">&#xe602</i>
            <i class="ui-fonts icon-un">&#xe602</i>
            <i class="ui-fonts icon-un">&#xe602</i>
        </ul>
    </div>
</div>

<section class="kuaikuai-btn2 am-topbar-fixed-bottom" style="height: 75px;">
    <button type="submit" class="btn am-btn am-btn-danger am-btn-lg am-btn-buy">快快车生活服务热线</button>
</section>

<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        //  星星评价
        var iStar = 5;

        $li = $('#list').find('i');
        for(var i = 1; i <= $li.length; i++) {
            $li[i - 1].index = i;
            $($li[i - 1]).on('click', function () {
                fnPoint(this.index);
            });
        }

        //  评分处理
        function fnPoint(iArg)
        {
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < $li.length; i++) $li[i].className = i < iScore ? "ui-fonts icon-un" : "ui-fonts";
        }

        $('#star > ul#list').on('touchmove', function() {
            var iArg = 0;
            var x = event.targetTouches[0].pageX;
            if (x < 120) {
                iArg = 1;
                fnPoint(iArg);
            } else if (x < 150) {
                iArg = 2;
                fnPoint(iArg);
            } else if (x < 180) {
                iArg = 3;
                fnPoint(iArg);
            } else if (x < 210) {
                iArg = 4;
                fnPoint(iArg);
            } else if (x < 250) {
                iArg = 5;
                fnPoint(iArg);
            }
        });
    });
</script>
</body>
</html>